<template>
  <!-- 简单登录还需要引入两个css文件 -->
  <!--    <el-form ref="loginForm" :model="loginForm" class="login-form" autocomplete="off" label-position="left">-->
  <!--      <div class="title-container">-->
  <!--        <h3 class="title">-->
  <!--          登 录-->
  <!--        </h3>-->
  <!--      </div>-->
  <!--      <span v-if="login.type === 'up'">-->
  <!--        <el-form-item prop="username">-->
  <!--          <el-input-->
  <!--            ref="username"-->
  <!--            v-model="loginForm.username"-->
  <!--            placeholder="账号"-->
  <!--            prefix-icon="el-icon-user"-->
  <!--            name="username"-->
  <!--            type="text"-->
  <!--            autocomplete="off"-->
  <!--            @keyup.enter.native="handleLogin"-->
  <!--          />-->
  <!--        </el-form-item>-->
  <!--        <el-form-item prop="password">-->
  <!--          <el-input-->
  <!--            ref="password"-->
  <!--            v-model="loginForm.password"-->
  <!--            prefix-icon="el-icon-key"-->
  <!--            type="password"-->
  <!--            placeholder="密码"-->
  <!--            name="password"-->
  <!--            autocomplete="off"-->
  <!--            :show-password="true"-->
  <!--            @keyup.enter.native="handleLogin"-->
  <!--          />-->
  <!--        </el-form-item>-->
  <!--        <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:14px;" @click.native.prevent="handleLogin">-->
  <!--          立即登录-->
  <!--        </el-button>-->
  <!--      </span>-->
  <!--    </el-form>-->
  <!-- 花哨后台 -->
  <div id="demo" class="login-box">
    <div class="input-content">
      <div class="login_tit">
        <div>
          <i class="tit-bg left" />
          wherePI · 后台管理系统
          <i class="tit-bg right" />
        </div>
        <p>Strive&nbsp;&nbsp;&nbsp;&nbsp;Everyday</p>
      </div>
      <div v-if="loginIsShow">
        <p class="p user_icon">
          <input v-model="loginForm.username" type="text" placeholder="账号" autocomplete="off" class="login_txtbx">
        </p>
        <p class="p pwd_icon">
          <input v-model="loginForm.password" type="password" placeholder="密码" autocomplete="off" class="login_txtbx">
        </p>
      </div>
      <div v-else>
        <p class="p user_icon">
          <input v-model="RegisterForm.username" type="text" placeholder="账号" autocomplete="off" class="login_txtbx" @blur="isUsername">
        </p>
        <span v-show="flag" style="color: red">登录名重复！</span>
        <p class="p user_icon">
          <input v-model="RegisterForm.name" type="text" placeholder="昵称" autocomplete="off" class="login_txtbx">
        </p>
        <p class="p pwd_icon">
          <input v-model="RegisterForm.password" type="password" placeholder="密码" autocomplete="off" class="login_txtbx">
        </p>
      </div>
      <div class="signup">
        <div v-if="loginIsShow">
          <a class="gv" href="#" @click="handleLogin">登&nbsp;&nbsp;录</a>
          <a class="gv" href="#" @click="loginIsShow = false">注&nbsp;&nbsp;册</a>
        </div>
        <div v-else>
          <a class="gv" href="#" @click="handleRegister">提&nbsp;&nbsp;交</a>
          <a class="gv" href="#" @click="loginIsShow = true">返&nbsp;&nbsp;回</a>
        </div>
      </div>
    </div>
    <div class="canvaszz" />
    <canvas id="canvas" />
  </div>
</template>

<script>
import db from '@/utils/localstorage'
export default {
  name: 'Login',
  data() {
    return {
      login: {
        type: 'up'
      },
      loginForm: {
        username: '',
        password: ''
      },
      RegisterForm: {
        username: '',
        password: '',
        name: ''
      },
      flag: false,
      loginIsShow: true,
      loading: false
    }
  },
  mounted() {
    db.clear()
    this.$nextTick(() => {
      var canvas = document.getElementById('canvas')
      var ctx = canvas.getContext('2d')
      var w = canvas.width = window.innerWidth
      var h = canvas.height = window.innerHeight
      var hue = 217
      var stars = []
      var count = 0
      var maxStars = 2500// 星星数量
      var canvas2 = document.createElement('canvas')
      var ctx2 = canvas2.getContext('2d')
      canvas2.width = 100
      canvas2.height = 100
      var half = canvas2.width / 2
      var gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half)
      gradient2.addColorStop(0.025, '#CCC')
      gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)')
      gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)')
      gradient2.addColorStop(1, 'transparent')
      ctx2.fillStyle = gradient2
      ctx2.beginPath()
      ctx2.arc(half, half, half, 0, Math.PI * 2)
      ctx2.fill()
      function random(min, max) {
        if (arguments.length < 2) {
          max = min
          min = 0
        }
        if (min > max) {
          var hold = max
          max = min
          min = hold
        }
        return Math.floor(Math.random() * (max - min + 1)) + min
      }
      function maxOrbit(x, y) {
        var max = Math.max(x, y)
        var diameter = Math.round(Math.sqrt(max * max + max * max))
        return diameter / 2
        // 星星移动范围，值越大范围越小，
      }
      var Star = function() {
        this.orbitRadius = random(maxOrbit(w, h))
        this.radius = random(60, this.orbitRadius) / 18
        // 星星大小
        this.orbitX = w / 2
        this.orbitY = h / 2
        this.timePassed = random(0, maxStars)
        this.speed = random(this.orbitRadius) / 500000
        // 星星移动速度
        this.alpha = random(2, 10) / 10
        count++
        stars[count] = this
      }
      Star.prototype.draw = function() {
        var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX
        var y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY
        var twinkle = random(10)
        if (twinkle === 1 && this.alpha > 0) {
          this.alpha -= 0.05
        } else if (twinkle === 2 && this.alpha < 1) {
          this.alpha += 0.05
        }
        ctx.globalAlpha = this.alpha
        ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius)
        this.timePassed += this.speed
      }
      for (var i = 0; i < maxStars; i++) {
        new Star()
      }
      function animation() {
        ctx.globalCompositeOperation = 'source-over'
        ctx.globalAlpha = 0.5 // 尾巴
        ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)'
        ctx.fillRect(0, 0, w, h)
        ctx.globalCompositeOperation = 'lighter'
        for (var i = 1, l = stars.length; i < l; i++) {
          stars[i].draw()
        }
        window.requestAnimationFrame(animation)
      }
      animation()
    })
  },
  methods: {
    reset() {
      this.RegisterForm = {
        username: '',
        password: '',
        name: ''
      }
      this.loginIsShow = true
    },
    isUsername() {
      if (!this.loginIsShow) {
        this.$get('/login/longinUsername', { username: this.RegisterForm.username }).then(res => {
          this.flag = res.data.status === 0
        })
      }
    },
    handleLogin() {
      const that = this
      this.$get('/login/auto/token', this.loginForm).then(res => {
        if (res.data.status === 1) {
          this.$message.success(res.data.message)
          this.$store.commit('getter/setToken', res.data.data.token)
          this.$store.commit('getter/setUser', res.data.data.user)
          that.$router.push('/')
        } else {
          this.$message.warning(res.data.message)
        }
      })
    },
    handleRegister() {
      if (!this.flag) {
        this.$post('/login/register', this.RegisterForm).then(res => {
          if (res.data.status === 1) {
            this.$message.success(res.data.message)
            this.reset()
          } else {
            this.$message.warning(res.data.message)
          }
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
    .J_codeimg{z-index:-1;position:absolute;}
</style>
